<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<script type="text/javascript">

	$(function() {
		var estadoSelect = $('#estadoSelect');
		popularMunicipios(estadoSelect);
		
		estadoSelect.on('change', function(){
			popularMunicipios(estadoSelect);
		});
		
	});
	
	function desabilitarMunicipio(municipioSelect) {
		var options = [];
		options.push(' <option>Selecione..</option> '); // colocando a primeira option...
		municipioSelect.html(options.join('')).prop('disabled', 'disabled');
	}
	
	function popularMunicipios(estadoSelect) {
		var municipioSelect = $('#municipioSelect');
		var selecionado = estadoSelect.val(); // pega o ID do estado
	      if(selecionado != '') {
		      $.ajax({
		         url:'/sisp-sicrim/pages/municipio/lista/' + selecionado,
		         dataType:'json', // O Server vai retornar um JSON
		         success:function(data){
		            // Precisa transformar de json para objeto html
		            var options = [];
		            options.push(' <option>Selecione..</option> '); // colocando a primeira option...
		            for (var i = 0; i < data.length; i++) {
		            	var sel = (${entidade.municipio != null ? entidade.municipio.id : 0} == data[i].id);
		               options.push('<option value="'+ data[i].id + '"' + (sel ? 'selected' : '') + '>' + data[i].descricao + '</option>');
		            }
		            // Agora precisa juntar esses options dentro da combo de cidades
		            municipioSelect.html(options.join('')).prop('disabled', false);
		         }
		      });
	      }
	      else {
	    	  desabilitarMunicipio(municipioSelect);
	      }
	}

 </script>

<form action="${path}/pages/endereco/salvar" method="POST" class="formCadastro">
    
    <c:if test="${not empty entidade.id}">
        <input type="hidden" name="_method" value="PUT"/>
        <label><fmt:message key='campo.id' /></label>
        <input type="text" name="entidade.id" value="${entidade.id}" readonly="readonly" />
    </c:if>
  
    <label><fmt:message key='campo.tipoLogradouro' /></label>
    <select name="entidade.tpLogradouro">
        <c:forEach items="${tipoLogradouroList}" var="tpLogradouro">    
            <option value="${tpLogradouro.id}" ${entidade.tpLogradouro.id == tpLogradouro.id ? 'selected' : ''}>${tpLogradouro.descricao}</option>    
        </c:forEach>
    </select>
  
    <label><fmt:message key='campo.nomeLogradouro' /></label>
    <input type="text" name="entidade.nmLogradouro" value="${entidade.nmLogradouro}"
   		   class="${mapErrors['nmLogradouro'] != null ? 'inputError' : ''}"
    	   title="${mapErrors['nmLogradouro'] != null ? mapErrors['nmLogradouro'] : ''}"/>
	
    <label><fmt:message key='campo.numeroLogradouro' /></label>
    <input type="text" name="entidade.numero" value="${entidade.numero}"
           class="${mapErrors['numero'] != null ? 'inputError' : ''}"
    	   title="${mapErrors['numero'] != null ? mapErrors['numero'] : ''}"/>
    
    <label><fmt:message key='campo.complementoLogradouro' /></label>
    <input type="text" name="entidade.complemento" value="${entidade.complemento}"
           class="${mapErrors['complemento'] != null ? 'inputError' : ''}"
    	   title="${mapErrors['complemento'] != null ? mapErrors['complemento'] : ''}"/>

    <label><fmt:message key='campo.bairro' /></label>
    <input type="text" name="entidade.bairro" value="${entidade.bairro}"
           class="${mapErrors['bairro'] != null ? 'inputError' : ''}"
    	   title="${mapErrors['bairro'] != null ? mapErrors['bairro'] : ''}"/>
    
    <label><fmt:message key='campo.cep' /></label>
    <input type="text" class="cep" name="entidade.cep" value="${entidade.cep}"
           class="${mapErrors['cep'] != null ? 'inputError' : ''}"
    	   title="${mapErrors['cep'] != null ? mapErrors['cep'] : ''}"/>
    
    <label><fmt:message key='campo.estado' /></label>
    <select id="estadoSelect">
		<option value=""><fmt:message key='campo.selecione' /></option>
        <c:forEach items="${estadoList}" var="estado">    
            <option value="${estado.id}" ${entidade.municipio.estado.id == estado.id ? 'selected' : ''}>${estado.descricao}</option>    
        </c:forEach>
    </select>
    
    <label><fmt:message key='campo.municipio' /></label>
    <select id="municipioSelect" name="entidade.municipio">
        <c:forEach items="${municipioList}" var="municipio">    
            <option value="${municipio.id}" ${entidade.municipio.id == municipio.id ? 'selected' : ''}>${municipio.descricao}</option>    
        </c:forEach>
    </select>
    
    <label><fmt:message key='campo.status' /></label>
    <div class="radioButton">
        <c:forEach items="${statusList}" var="status">
            <input type="radio"  name="entidade.status" value="${status.value}" ${entidade.status.value == status.value ? 'checked' : ''} /><label>${status.label}</label>
        </c:forEach>
    </div>

    <div class="actions">
        <input type="submit" value="<fmt:message key='acao.salvar' />" />
    </div>
</form>
